import React, {Component} from 'react';
import {nanoid} from "nanoid";
import {connect} from "react-redux";
import {addPer} from "../../redux/actions/person"
class Person extends Component {
    add = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value
        console.log(name,age)
        const personObj = {id:nanoid(),name,age}
        // console.log(personObj)
        this.props.addPer(personObj)
        this.nameNode.value = ""
        this.ageNode.value =""

    }
    render() {
        return (
            <div>
               <h1>我是person组件,上面组件的求和为:{this.props.sum}</h1>
                <input ref={c=>this.nameNode = c} type="text" placeholder="输入姓名"/>
                <input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
                <button onClick={this.add}>添加</button>
                <ul>
                    {
                        this.props.personArr.map(item=>{
                            return <li key={item.id}>{item.name}--{item.age}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}
export default connect(
    state=>({personArr:state.addPerson,sum:state.count}),
    {
        addPer
    }


)(Person)

